<template>
  <div class="">
      <input type="text" v-model='firstname'/>
      <input type="text" v-model='lastname'>
      <input type="text" v-model='fullname'>
  </div>
  
  <p @click="count++"> count:{{count}}</p>
  <p @click="x++">x:{{x}}, y:{{y}}, x+y:{{x+y}}</p>
  <p @click="userobj.age++">{{userobj.username}}--{{userobj.age}}</p>
 <p @click="replaceUserobj1Fn">{{userobj1.username}}--{{userobj1.age}}</p>
</template>
<script setup>
import {computed,ref,onMounted,watch,reactive } from 'vue'
// vue组合式api 的生命周期共有12个, 
// 去掉了 beforeCreate 和 created
// 修改了beforeDestroy 和 destroyed => onBeforeUnmount , onunmounded
// 新增一个setup 生命周期
const firstname = ref('');
const lastname = ref ('');
// const fullname = computed(()=>{
//   return  firstname.value+lastname.value
// })

const fullname = computed({
    get(){
      return  firstname.value+lastname.value
    },
    set(newvalue){
        firstname.value = newvalue.substr(0,1);
        lastname.value = newvalue.substr(1)
    }
})
 
// 生命周期
// onMounted(()=>{
//     console.log('onMounted1');
// })

// onMounted(()=>{
//     console.log('onMounted2');
// })

// watch 侦听器 语法1:
// watch 监听器语法: 在组合式api中默认是深度监听, 但是没有初始监听, 
// 实现初始监听需要设置 immediate: true

const count =ref(100);
// watch(count,(newvalue , oldvalue)=>{
//   console.log(count.value);
// })

// watch侦听器 语法2: 监听一个计算属性
const x = ref(1);
const y = ref(2);
watch(()=>x.value+y.value,(newvalue,oldvalue)=>{
    console.log(newvalue);
})

// watch 侦听器 语法3: 监听一个对象中的某一个属性
const userobj  = reactive({
   username:'张会娟',
   age:31
})

// watch(()=>userobj.age,(newvalue)=>{
//   console.log(newvalue);
// })

// watch 侦听器  语法4: 组合式api中 默认是深层监听
// watch (userobj,(newvalue)=>{
//   console.log(newvalue);
// })
 
// watch 侦听器  语法5(了解): 组合式api中 默认是深层监听
let userobj1 = ref({
  username:'张宇宁',
  age:38
});

const replaceUserobj1Fn = ()=>{
  userobj1.value={
     username:'郭翔',
     age:32
  }
}
watch(()=>userobj1.value,(newvalue)=>{
    console.log(newvalue);
    console.log('替换了');
})

// watch 侦听器  语法6(了解) 强制转换成深度监听
// 当修改年龄时, 默认监听不到, 使用强制转成深度监听
// watch(()=>userobj,(newvalue)=>{
//    console.log(newvalue);
// }, { deep: true })


// watch 监听器 语法7: 立即监听
// watch (userobj, (newvalue)=>{
//     console.log(newvalue);
// },{immediate:true})



</script>
<style>

</style>
